<template>
    <div class="toast">
        <div class="dialog" v-show="toast">
            <div class="loading" v-show="loading">
                <i class="iconfont icon-loading"></i>
            </div>
            <div class="icon" v-show="icon">
                <i class="iconfont" :class="iconfont"></i>
            </div>
            <div class="text">{{text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'toast',
    props: {
        toast: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        text: {
            type: String
        },
        icon: {
            type: Boolean,
            default: false
        },
        iconfont: {
            type: String
        }
    }
}
</script>

<style scoped>
.toast .dialog{
    position: fixed;
    z-index:1024;
    top:50%;
    left:50%;
    width:2.4rem;
    border-radius:0.2rem;
    font-size:0.32rem;
    line-height:0.4rem;
    color:#fff;
    text-align: center;
    background:rgba(0, 0, 0, 0.7);
    min-height:2.4rem;
    padding:0.32rem;
    transform: translate3d(-50%,-50%,0);
    opacity:1;
}
.toast .loading{
    margin-top:0.2rem;
    margin-bottom:0.4rem;
    animation: rotate 0.8s linear infinite;
    animation-duration: 2s;
}
.toast .icon .iconfont,
.toast .loading .iconfont{
    font-size:0.58rem;
}
.toast .icon{
    margin-top:0.2rem;
    margin-bottom:0.4rem;
}
@keyframes rotate{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
</style>